<!-- file 白板编辑器 -->
<template>
  <a-spin :spinning="spinning" size="large" wrapper-class-name="canvasLoading">
    <div class="p-editor__container" v-show="!spinning">
      <!--  左上角白板信息栏  -->
      <InfoBar></InfoBar>
      <!--  右上角协作栏  -->
      <CollaborationBar :my-role="myRole"></CollaborationBar>
      <!--  左侧工具栏  -->
      <ToolBar v-if="myRole !== boardRole.Viewer"></ToolBar>
      <div class="p-editor-canvas__container">
        <canvas id="canvas"></canvas>
      </div>
      <!--  缩放栏  -->
      <ZoomBar :my-role="myRole"></ZoomBar>
      <!--  历史栏（撤回、恢复）  -->
      <HistoryBar></HistoryBar>
      <!--  多页管理栏  -->
      <!--      <PageDrawer></PageDrawer>-->
      <!--  移动菜单栏  -->
      <MoveBar></MoveBar>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, provide, ref } from 'vue';
import Editor from '@/core/core.ts';
import {
  ResizePlugin,
  DrawLinePlugin,
  DeletePlugin,
  CopyPlugin,
  LayerPlugin,
  SelectPlugin,
  DrawBrushPlugin,
  TextBoxPlugin,
  EraserPlugin,
  ShapePlugin,
  DragCanvasPlugin,
  // HoverElementPlugin,
  ZoomPlugin,
  LockPlugin,
  HistoryPlugin,
  ExportPlugin,
} from '@/core';
import { useCreateCanvas } from '@/hooks/useCreateCanvas.ts';
import ToolBar from '@/pages/editor/components/ToolBar.vue';
import ZoomBar from '@/pages/editor/components/ZoomBar.vue';
import PageDrawer from '@/pages/editor/components/PageDrawer/index.vue';
import MoveBar from '@/pages/editor/components/MoveBar.vue';
import InfoBar from '@/pages/editor/components/InfoBar.vue';
import CollaborationBar from '@/pages/editor/components/CollaborationBar/index.vue';
import HistoryBar from '@/pages/editor/components/HistoryBar.vue';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
import { useBoardStore, useAccountStore } from '@/store';
import { message } from 'ant-design-vue';
import { boardRole, BoardSyncEvent } from '@/utils/Const.ts';

const boardStore = useBoardStore();
const accountStore = useAccountStore();
const canvasEditor = new Editor();
const route = useRoute();
const router = useRouter();
const myRole = ref(2);

// 进入 编辑器路由 后，保存当前白板ID
boardStore.setCurrentBoardId(<string>route.params.boardId);

// 加载状态
const spinning = ref(true);
onMounted(() => {
  const canvas = useCreateCanvas();
  canvasEditor.init(canvas);
  canvasEditor.use(ResizePlugin);
  canvasEditor.use(DrawLinePlugin);
  canvasEditor.use(DeletePlugin);
  canvasEditor.use(CopyPlugin);
  canvasEditor.use(LayerPlugin);
  canvasEditor.use(SelectPlugin);
  canvasEditor.use(DrawBrushPlugin);
  canvasEditor.use(TextBoxPlugin);
  canvasEditor.use(EraserPlugin);
  canvasEditor.use(ShapePlugin);
  canvasEditor.use(DragCanvasPlugin);
  // canvasEditor.use(HoverElementPlugin);
  canvasEditor.use(ZoomPlugin);
  canvasEditor.use(LockPlugin);
  canvasEditor.use(HistoryPlugin);
  canvasEditor.use(ExportPlugin);

  // 建立 WebSocket 连接， 编辑器处于白板加载状态，只有接收并处理完初始化数据
  canvasEditor.buildWebSocketConnect(
    <string>route.params.boardId,
    accountStore.userToken,
  );
  // 建立 WebSocket 连接成功后停止加载
  // canvasEditor.on('connected', () => {
  //  spinning.value = false;
  // });
  // 白板初始化完所有画布数据后 编辑器页面才停止加载动画
  canvasEditor.on(BoardSyncEvent.type0, () => {
    if (!canvasEditor.canvasloading) {
      spinning.value = false;
    }
  });

  canvasEditor.on(BoardSyncEvent.type2, (data: any) => {
    myRole.value = data.myRole;
    if (myRole.value === boardRole.Viewer) {
      canvasEditor.setSelectMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setDragMode(true);
    } else {
      canvasEditor.setSelectMode(true);
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setDragMode(false);
    }
  });

  canvasEditor.on(BoardSyncEvent.Disconnected, (e) => {
    if (e.code !== 1000) {
      message.error(e.reason);
      router.push({ name: 'workbench' });
    }
  });
});
// 离开该路由时断开WebSocket连接
onBeforeRouteLeave(() => {
  canvasEditor.disconnectWebSocket();
  return true;
});
onUnmounted(() => {
  boardStore.setCurrentBoardId('');
});

provide('canvasEditor', canvasEditor);
</script>

<style scoped lang="scss">
.canvasLoading {
  height: 100vh;
}
.p-editor-canvas__container {
  overflow: hidden;
  #canvas {
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.04) 1px,
        transparent 0
      ),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 0);
    background-size: 5rem 5rem;
    background-color: rgb(247, 249, 250);
  }
}
</style>
